<template>
  <view class="page">
    <view class="section">
        <text class="font text pos">管理成员</text>
        <view class="divider pos_2"></view>
		<view style="height: 160rpx;"></view>
		<view class="image-container" @click="openImagePicker">
		 <image class="avatar" :src="user.avator"></image>
		</view>
      <!-- 用户信息表单 -->
      <view class="form">
        <view class="form-item">
          <text class="label">姓名</text>
          <input v-model="user.name" class="input" style="align-items: flex-end;" placeholder="请输入用户名称"></input>
        </view>
        <view class="divider_2"></view>
        <view class="form-item">
          <text class="label">性别</text>
          <picker class="picker" mode="selector" :value="sexIndex" @change="pickerSex" :range="sex">
            {{sex[sexIndex]}}
          </picker>
        </view>
		<view class="divider_2"></view>
		<view class="form-item">
			  <text class="label">出生日期</text>
			  <picker class="picker" mode="date" @change="pickBirthday">
					<view v-if="birthday">
						{{birthday}}
					</view>
					<view v-else>请选择出生日期</view>
			  </picker>
			</view>
			<view class="divider_2"></view>
			<view class="form-item">
			  <text class="label">身高</text>
			  <picker class="picker" mode="selector" :value="heightIndex" :range="heightOptions" @change="pickHeight">
				{{heightOptions[heightIndex]}}
			  </picker>
			</view>
			<view class="divider_2"></view>
			<view class="form-item">
			  <text class="label">体重</text>
			  <picker class="picker" mode="selector" :range="weightOptions" :value="weightIndex" @change="pickWeight">
				{{weightOptions[weightIndex]}}
			  </picker>
			</view>
      </view>
    </view>
		<view>
			<button @click="addMember">添加</button>
		</view>
  </view>
</template>

<script>
import {addMem} from '../../api/addMem';	
export default {
  data() {
    return {
			user : {
				name : "",
				avator : "../../static/images/user.jpg",
				birthday: "2003-04-16",
				height:"160",
				weight:"90",
				sex:"男"
			},
			sexIndex:0,
			sex:['男','女'],
			heightIndex:0,
      heightOptions: [],
			weightIndex:0,
      weightOptions: [],
      userImage: "../../static/images/user.jpg",
			birthday:"",
    };
  },
  created() {
    // 设置身高和体重选项
    for (let i = 100; i <= 250; i++) {
      this.heightOptions.push(i + 'cm');
    }
    for (let i = 20; i <= 200; i++) {
      this.weightOptions.push(i + 'kg');
    }
  },
  methods: {
			pickBirthday(e){
				console.log(e)
				this.birthday = e.detail.value
				this.user.birthday = this.birthday
				console.log(this.user)		
			},
			pickWeight(e){
				console.log(e)
				this.weightIndex = e.detail.value
				this.user.weight = this.weightIndex[this.weightIndex]
				console.log(this.user)				
			},
			pickHeight(e){
				console.log(e)
				this.heightIndex = e.detail.value
				this.user.height = this.heightOptions[this.heightIndex]
				console.log(this.user)
			},
			pickerSex(e){
				console.log(e)
				this.sexIndex = e.detail.value
				this.user.sex = this.sex[this.sexIndex]
				console.log(this.user)
			},
      openImagePicker() {
           uni.chooseImage({
             count: 1, // 可选择的图片数量，这里设置为1
             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
             sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认两者都有
             success: (res) => {
               // 选择图片成功后的回调函数
               this.userImage = res.tempFilePaths[0]; // 更新用户图片
             }
           });
    },
      addMember() {
				addMem(this.user).then(res => {
					uni.navigateBack();
				}).catch(e => {
					console.log(e)
					console.log("添加失败")
				})
        // 返回上一页或者导航到其他页面
      }
    }// 可能需要一些逻辑或方法
};
</script>

<style>
.page {
  flex-direction: column;
  background-color: #f3f6f8;
  background-image: linear-gradient(179.7deg, #17a8e4 0.2%, #94d6e2 24.4%, #ffffff 38.9%, #ffffff 70.5%);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section {
  background-image: linear-gradient(179.7deg, #17a8e4 0.2%, #94d6e2 24.4%, #ffffff 38.9%, #ffffff 70.5%);
  width: 750rpx;
  height: 1334rpx;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.font {
  font-size: 35rpx;
  font-family: Inter;
  line-height: 35rpx;
}
.text {
  color: #ffffff;
  font-weight: 600;
  line-height: 38rpx;
}
.pos {
  position: absolute;
  left: 50%;
  top: 40rpx;
  transform: translateX(-50%);
}
.divider {
  background-color: #ffffff;
  height: 4rpx;
}
.divider_2 {
  background-color: #bbbbbb;
  height: 2rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 120rpx;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.form {
  margin-top: 40rpx;
  margin-left: 5%;
  margin-right:5%;
  height: 400rpx;
  background-color: #f5f8f9;
  border-radius: 20rpx;
  padding: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.label {
	font-size: 35rpx;
}

.input {
	font-size: 35rpx;
	width: 38%;
  margin-right: 10rpx;
}

.picker {
	flex-direction: row;
	font-size: 35rpx;
	margin-top: 20rpx;
}

</style>
